<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-23 09:31:50
-->
<template>
  <!--1. 容器 -->
  <div ref="right1_container" style="height: 100%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Column } from '@antv/g2plot';
import {get} from '../../../utils/request'
export default {
  data(){
    return {
      dd:[]
    }
  },
  async mounted() {
    // 4. 查询数据
    await this.loadData();
    // 5. 页面渲染的时候初始化图表
    this.initChart()
  },
  methods:{
    // 查询统计数据 ajax  异步的javascript和xml 
    async loadData(){
      let url = "/dashboard/queryEngineerBindDeviceNumber"
      let resp = await get(url);
      this.dd = resp.data;
    },
    //3. 初始化图表
    initChart(){
      const data = this.dd;
      
    const columnPlot = new Column(this.$refs.right1_container, {
  data,
  xField: 'type',
  yField: 'value',
  columnWidthRatio: 0.83,
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  meta: {
    type: {
    },
    sales: {
    },
  },
});

columnPlot.render();
    }
  }
}
</script>